<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form :inline="true" class="demo-form-inline form_top">
        <el-form-item
          label="型号名称:"
          extra
          style="font-size: 16px; font-weight: 400"
        >
          <el-input v-model="yeshu.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="chaxun"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="xinjian"
        >
          新建
        </el-button>
        <!-- table表格 -->
        <el-table
          v-loading="loading"
          size="mini"
          :data="tableData"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column
            size="mini"
            prop="typeId"
            label="序号"
            width="80px"
          />
          <el-table-column
            size="mini"
            prop="name"
            label="型号名称"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="model"
            label="型号编号"
            align="center"
          />
          <el-table-column size="mini" label="设备图片" align="center">
            <template #default="{ row }">
              <div class="touXiang">
                <img class="touXian" :src="row.image">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            size="mini"
            prop="vmRow"
            label="货道行"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="vmCol"
            label="货道列"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="channelMaxCapacity"
            label="设备容器"
            align="center"
          />
          <el-table-column size="mini" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="text"
                class="button_table_foot"
                @click="xiugai(row)"
              >修改</el-button>
              <el-button
                style="color: red"
                type="text"
                class="button_table_foot"
                @click="shanchu(row)"
              >删除</el-button>
            </template>
          </el-table-column></el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>
            共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ totalPage }}
            页
          </p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              class="foot_button_top"
              :disabled="pageIndex <= 1 ? true : false"
              @click="handleSizeChange"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              :disabled="pageIndex >= totalPage ? true : false"
              @click="handleCurrentChange"
            >下一页</el-button>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item
            label="型号名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入型号名称', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model="form.name"
              type="text"
              style="width: 350px"
              placeholder="请输入"
              :maxlength="10"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="型号编码"
            prop="model"
            :rules="[
              { required: true, message: '请输入型号编码', trigger: 'blur' },
              {
                pattern: /^1[1-9]\d{9}$/,
                message: '型号编码不正确',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              v-model="form.model"
              style="width: 350px"
              type="text"
              placeholder="请输入(限制数字，字母，中划线，下划线)"
              :maxlength="15"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label="货道行数"
            prop="vmRow"
            :rules="[
              { required: true, message: '请输入型号名称', trigger: 'blur' }
            ]"
          >
            <template>
              <el-input-number
                v-model="form.vmRow"
                placeholder="请输入"
                style="width: 350px"
                controls-position="right"
                :min="1"
                :max="10"
              />
            </template>
          </el-form-item>
          <el-form-item
            label="货道列数"
            prop="vmCol"
            :rules="[
              { required: true, message: '请输入型号名称', trigger: 'blur' }
            ]"
          >
            <template>
              <el-input-number
                v-model="form.vmCol"
                placeholder="请输入"
                style="width: 350px"
                controls-position="right"
                :min="1"
                :max="10"
              />
            </template>
          </el-form-item>
          <el-form-item
            label="货道容量"
            prop="channelMaxCapacity"
            :rules="[
              { required: true, message: '请输入型号名称', trigger: 'blur' }
            ]"
          >
            <template>
              <el-input-number
                v-model="form.channelMaxCapacity"
                placeholder="请输入"
                style="width: 350px"
                controls-position="right"
                :min="1"
                :max="10"
              />
            </template>
          </el-form-item>
          <el-form-item label="设备图片">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="uploadImage"
            >
              <img v-if="value" :src="value" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="quXiaoLe">取 消</el-button>
          <el-button type="primary" @click="queDingLe">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
import { shouHouLieBiao, xiaoShouJiShanCu } from '@/api/equipment'
export default {
  name: 'LeiXing',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      form: {
        vmRow: '',
        vmCol: '',
        name: '',
        channelMaxCapacity: '',
        model: '',
        image: ''
      },
      tableData: [],
      yeshu: { pageIndex: '1', pageSize: '10', name: '' },
      huante: { pageIndex: '1', pageSize: '10', innerCode: '' },
      totalCount: '',
      totalPage: '',
      pageIndex: '',
      dialogFormVisible: false,
      title: ''
    }
  },
  // 渲染页面
  created() {
    this.houQuShuJu()
  },
  methods: {
    // 选择图片上传
    uploadImage(params) {
      console.log(params.file)
      const cos = new COS({
        SecretId: 'AKIDDSdjgnjT1NZ3a7VjkfVIwOdfv9IH2b8e',
        SecretKey: 'WEwe9WJ9vLeq1BHNLLKF5Up10ndUDk24'
      }) // 完成cos对象的初始化
      cos.putObject({
        Bucket: 'heimachengxuyuan-1302806742', // 存储桶名称
        Region: 'ap-nanjing', // 地域名称
        Key: params.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: params.file // 文件对象
      }, (err, data) => {
        if (data.statusCode === 200 && data.Location) {
          // 拿到了腾讯云返回的地址
          // 通过input自定义事件将地址传出去
          this.$emit('input', 'http://' + data.Location) // 将地址返回了
        } else {
          this.$message.error(err.Message) // 上传失败提示消息
        }
      })
    },
    // 检查函数 判断文件的类型还有大小 return  true(继续上传)/false(停止上传)
    beforeAvatarUpload(file) {
      // jpeg png gif bmp

      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5 // 5M

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    // 获取数据
    async houQuShuJu() {
      this.loading = true
      const data = await shouHouLieBiao(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
      console.log(data)
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      this.pageIndex = data.pageIndex
    },
    // 搜索
    async chaxun() {
      this.loading = true
      const data = await shouHouLieBiao(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    // 换页
    async handleSizeChange() {
      this.loading = true
      this.yeshu.pageIndex--
      const data = await shouHouLieBiao(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    async handleCurrentChange() {
      this.loading = true
      this.yeshu.pageIndex++
      const data = await shouHouLieBiao(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    // 删除
    shanchu(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await xiaoShouJiShanCu(data.typeId)
          this.loading = true
          this.houQuShuJu()
          this.loading = false
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // try {
      //   const dat = await xiaoShouJiShanCu(data.typeId)
      //   console.log(dat)
      //   this.houQuShuJu()
      // } catch (erro) {
      //   this.$message.error('error')
      // }
    },

    // 修改
    xiugai() {
      this.dialogFormVisible = true
      this.title = '修改设备类型'
    },

    // // 上传头像
    // UploadImg(data) {
    //   console.log(data)
    //   // 密钥
    //   const cos = new COS({
    //     SecretId: 'AKIDSqDSUJ7mDPLILMqQDyqcrzxmXSSPbm4H',
    //     SecretKey: 'KPPOIE6ztd9hAYtBXizynvx5HRabUEkb'
    //   })
    //   // 完成cos对象的初始化
    //   //  cos.putObject(参数，发请求后的回调函数)
    //   cos.putObject(
    //     {
    //       Bucket: 'zcy-1318643425', // 存储桶名称
    //       Region: 'ap-nanjing', // 地域名称
    //       Key: data.file.name, // 文件名称
    //       StorageClass: 'STANDARD', // 固定值
    //       Body: data.file // 文件对象
    //     },
    //     (err, data) => {
    //       if (err) {
    //         this.$message.error(err.Message)
    //       }
    //       if (data.statusCode === 200 && data.Location) {
    //         this.form.image = 'https://' + data.Location
    //       }
    //       console.log(data)
    //     }
    //   )
    // },

    // 新建
    xinjian() {
      this.dialogFormVisible = true
      this.title = '新增设备类型'
    },

    // 取消
    quXiaoLe() {
      this.dialogFormVisible = false
    },
    // 确定
    queDingLe() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.el-form {
  margin-left: 20px;
  ::v-deep .el-form-item__label {
    font-weight: normal;
  }
  .avatar-uploader {
    width: 115px;
    height: 115px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
    width: 115px;
    line-height: 115px;
  }
  .avatar {
    width: 115px;
    height: 115px;
    display: block;
  }
  .dialog-footer {
    margin-top: 20px;
    text-align: center;
    margin-right: -20px;
    .el-button--default {
      background-color: #fbf4f0 !important;
      margin-left: -20px;
      margin-right: 20px;
    }
    .el-button--primary {
      background-color: #ff5e20 !important;
      border: 1px solid #ff5e20;
    }
  }
}
.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    color: #000;
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .touXiang {
      display: block;
      width: 26px;
      height: 26px;
      object-fit: cover;
      border-radius: 50%;
      background: #f3f6fb;
      border: 1px solid #f3f6fb;
      margin: 0 auto;
      .touXian {
        width: 26px;
        height: 26px;
        border-radius: 50%;
      }
    }
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
